<template>
  <div class="skill-group">
    <el-table :data="filteredSkills" border>
      <el-table-column prop="name" label="技能名称" width="180"></el-table-column>
      <el-table-column label="技能值" width="150">
        <template #default="scope">
          <el-input-number
              v-model="character.skills[scope.row.key]"
              :min="0"
              :max="99"
              size="small"
              controls-position="right">
          </el-input-number>
          <span class="skill-values">
            ({{ character.skills[scope.row.key] }} /
            {{ Math.floor(character.skills[scope.row.key] / 2) }} /
            {{ Math.floor(character.skills[scope.row.key] / 5) }})
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="handleRollDice(scope.row.key)">
            掷骰
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="职业相关" width="100">
        <template #default="scope">
          <el-tag
              v-if="isProfessionSkill(scope.row.key)"
              type="success"
              size="small">
            职业
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    skills: {
      type: Object,
      required: true
    },
    character: {
      type: Object,
      required: true
    }
  },
  computed: {
    filteredSkills() {
      return Object.entries(this.skills).map(([key, skill]) => ({
        key,
        name: skill.name,
        base: skill.base,
        value: this.character.skills[key] || skill.base
      }));
    }
  },
  methods: {
    handleRollDice(skillKey) {
      this.$emit('roll-dice', skillKey);
    },
    isProfessionSkill(skillKey) {
      // 检查是否为当前职业的技能
      if (!this.character.profession) return false;

      const profSkills = this.$parent.professionSkills[this.character.profession] || [];
      return profSkills.includes(skillKey);
    }
  }
};
</script>

<style scoped>
.skill-group {
  margin-bottom: 20px;
}

.skill-values {
  display: inline-block;
  margin-left: 5px;
  color: #666;
  font-size: 12px;
}

.el-table {
  margin-top: 10px;
}

.el-tag {
  margin-left: 5px;
}
</style>
